<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>回收地图</title>
    <link rel="icon" href="./favicon.png" />
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/element-ui.css" />
    <link rel="stylesheet" href="../common/css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- header -->
      <header>
        <div class="logo">
          <a target="_blank">
            <img src="./images/logo.png" class="img-logo" />
          </a>
          <img src="./images/title.png" class="img-title" />
        </div>
        <div class="header-right">
          <div class="icon-list">
            <a target="_blank" class="icon-item">
              <img src="./images/icon-h-1.png" class="icon-list-icon" />
              <span>Feijiu </span>
            </a>
            <a target="_blank" class="icon-item">
              <img src="./images/icon-h-2.png" class="icon-list-icon" />
              <span>我的商铺 </span>
            </a>
            <a target="_blank" class="icon-item">
              <img src="./images/icon-h-3.png" class="icon-list-icon" />
              <span>帮助中心 </span>
            </a>
            <div id="workstationItemTel" class="icon-item">
              <img src="./images/icon-h-4.png" class="icon-list-icon" />
              <span>联系客服 </span>
              <!-- 客服电话 -->
              <div id="workstationTel">
                <div class="workstation-tel">
                  <span>400-136-5858</span>
                </div>
              </div>
            </div>
            <a target="_blank" class="icon-item">
              <img src="./images/icon-h-5.png" class="icon-list-icon" />
              <span>消息 (1)</span>
            </a>
          </div>
          <div class="user-info" id="workstationUserInfo">
            <img src="./images/default.png" class="img-avatar" />
            <div class="user-name">用户</div>
            <img src="./images/icon-menu.png" class="icon-menu" />
            <div id="workstationUserMenu">
              <div class="user-menu">
                <a target="_blank" class="menu-item"> 成长中心 </a>
                <a target="_blank" class="menu-item"> 积分商城 </a>
                <a target="_blank" class="menu-item"> 修改密码 </a>
                <a target="_blank" class="menu-item"> 手机绑定 </a>
                <a target="_blank" class="menu-item"> 账号注销 </a>
                <a target="_blank" class="menu-item menu-item-exit">
                  退出登录
                </a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="map-nav">
        <div class="map-nav-content">
          <div class="map-nav-list">
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >首页</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >我要处置</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >供应求购</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >租赁</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >报价</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >招标拍卖</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >资产处置</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >视频卖货</a
            >
          </div>
          <div class="map-nav-list">
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >开通会员</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >黄金展位</a
            >
            <a
              class="map-nav-item"
              href="https://www.feijiu.net"
              target="_blank"
              >固定排名</a
            >
          </div>
        </div>
      </div>
      <section class="page-container">
        <div class="panel panel-top">
          <h3 class="panel-title">
            <div class="icon-box">
              <img src="./images/icon-youshi.svg" class="panel-title-icon" />
            </div>
            回收地图三大优势
          </h3>
          <div class="panel-list">
            <div class="panel-item">
              <div class="item-title">
                <img src="./images/icon-rank.svg" class="panel-item-icon" />
                推荐优质客户入榜
              </div>
              <p class="panel-item-desc">
                筛选优质客户入地图，让大企业/处置方快速查看、一键对接提升询盘率。
              </p>
            </div>
            <div class="panel-item">
              <div class="item-title">
                <img src="./images/icon-message.svg" class="panel-item-icon" />
                即时沟通通道
              </div>
              <p class="panel-item-desc">
                内置智能询盘系统，支持一键发起在线询价价等深度沟通，响应时效缩短至30秒。
              </p>
            </div>
            <div class="panel-item">
              <div class="item-title">
                <img src="./images/icon-eye.svg" class="panel-item-icon" />
                可视化客户分布
              </div>
              <p class="panel-item-desc">
                通过地图热力呈现客户区域分布，支持多维度检索，快速识别优质回收需求区域。
              </p>
            </div>
          </div>
        </div>
        <div class="page-content">
          <div class="panel panel-search">
            <div class="panel-title">
              <div class="title-left">
                <img src="./images/icon-list.svg" class="panel-title-icon" />
                企业搜索榜
              </div>
            </div>
            <div class="search-box">
              <el-input
                v-model="keyword"
                placeholder="请输入回收关键词"
                class="input-with-select"
                size="small"
                @change="onSearch"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="onSearch"
                >
                  搜索
                </el-button>
              </el-input>
            </div>
            <div class="scroll-box">
              <div class="search-list">
                <div
                  class="search-item"
                  v-for="item in searchResult"
                  :key="item.id"
                  @click="onCompanyClick(item)"
                >
                  <p class="text-name">{{item.name}}</p>
                  <p class="text-num">{{item.distance}}km</p>
                </div>
                <div v-if="searchResult.length === 0" class="empty">
                  暂无数据
                </div>
              </div>
            </div>
          </div>
          <div class="panel panel-map">
            <div class="panel-title">
              <div class="title-left">
                <img
                  src="./images/icon-map-fill.svg"
                  class="panel-title-icon"
                />
                全国实力回收企业推荐
              </div>
              <div class="title-right" v-if="showButton">
                <div class="title-button" @click="onApply">
                  <i class="el-icon el-icon-s-opportunity"></i>
                  马上入驻
                </div>
              </div>
            </div>
            <div class="map-box" id="mapContainer"></div>
            <!-- 详情 -->
            <transition name="slide">
              <div
                class="drawer-container"
                v-if="showDetail"
                v-loading="loadingDetail"
              >
                <div class="btn-close" @click="showDetail= false">
                  <i class="el-icon-close"></i>
                </div>
                <div class="drawer-scroll">
                  <div class="drawer-content">
                    <div class="flex">
                      <p class="text-name">
                        {{detailInfo.name}}
                        <img
                          v-if="detailInfo.vip_image"
                          :src="detailInfo.vip_image"
                          class="img-vip"
                        />
                      </p>
                    </div>
                    <video
                      id="video"
                      v-if="detailInfo.video"
                      controls=""
                      autoplay=""
                      name="media"
                    >
                      <source :src="detailInfo.video" type="video/mp4" />
                    </video>
                    <div
                      v-if="detailInfo.images && detailInfo.images.length > 0"
                      class="image-box"
                    >
                      <a
                        v-for="item in detailInfo.images"
                        :key="item.id"
                        :href="item.link"
                        target="_blank"
                      >
                        <img
                          :title="item.title"
                          :src="item.src"
                          alt="图片"
                          class="image"
                        />
                      </a>
                    </div>
                    <div class="detail-info">
                      <div class="detail-item">
                        <span class="text-label"> 所在地区: </span>
                        <span class="text-value">{{detailInfo.zone}}</span>
                      </div>
                      <div class="detail-item">
                        <span class="text-label">联 系 人:</span>
                        <span class="text-value">
                          {{detailInfo.user_name}}
                        </span>
                      </div>
                      <div class="detail-item">
                        <span class="text-label">企业类型:</span>
                        <span class="text-value">
                          {{ detailInfo.company_cate }}
                        </span>
                      </div>
                      <div class="detail-item">
                        <span class="text-label">回收品类:</span>
                        <span class="text-value">{{ detailInfo.cate }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="text-desc">{{ detailInfo.desc }}</span>
                      </div>
                    </div>
                    <div class="message-box">
                      <h3 class="message-title">
                        <img
                          src="./images/icon-list2.svg"
                          class="message-title-icon"
                        />
                        供求信息
                      </h3>
                      <div class="message-list">
                        <a
                          v-for="item in detailInfo.message"
                          :key="item.id"
                          :href="item.link"
                          target="_blank"
                          class="message-item"
                        >
                          <div class="text-1">{{item.type}}</div>
                          <p class="text-2">{{item.desc}}</p>
                        </a>
                        <div class="fixed-bottom">
                          <a
                            :href="detailInfo.link"
                            target="_blank"
                            class="panel-button"
                            >在线询盘</a
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
        <div class="panel panel-bottom">
          <h3 class="panel-title">
            <div class="icon-box">
              <img src="./images/icon-system.svg" class="panel-title-icon" />
            </div>
            回收地图 x 在线咨询 x 实力推荐
          </h3>
          <div class="panel-list">
            <div class="panel-item">
              <div class="item-title">
                <div class="icon-box">
                  <img
                    src="./images/icon-rocket.svg"
                    class="panel-item-icon"
                    style="width: 18px"
                  />
                </div>
                询盘效率高
              </div>
              <p class="panel-item-desc">
                可视化市场展示实力企业、一键方便查看企业情况，提升询盘效率。
              </p>
            </div>
            <div class="panel-item">
              <div class="item-title">
                <div class="icon-box">
                  <img src="./images/icon-line.svg" class="panel-item-icon" />
                </div>
                生意线索多
              </div>
              <p class="panel-item-desc">
                万级查看用户，每次搜索点击都是一笔生意机会。
              </p>
            </div>
            <div class="panel-item">
              <div class="item-title">
                <div class="icon-box">
                  <img src="./images/icon-light.svg" class="panel-item-icon" />
                </div>
                展示曝光广
              </div>
              <p class="panel-item-desc">
                提升回收企业的曝光量、主动让处置需求客户联系您。
              </p>
            </div>
          </div>
        </div>
        <div v-if="showButton" class="panel-button" @click="onApply">
          马上申请入驻
        </div>
      </section>

      <el-dialog title="马上申请入驻" :visible.sync="showDialog" width="600px">
        <div class="dialog-container">
          <el-form :model="form" :rules="rules" label-width="100px" ref="form">
            <el-form-item label="联系人:" prop="name">
              <el-input
                v-model="form.name"
                autocomplete="off"
                @change="onChange"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="showDialog = false">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="onSubmit"
            :loading="loadingSubmit"
          >
            提交
          </el-button>
        </div>
      </el-dialog>
      <footer></footer>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/element-ui.js"></script>
    <script src="./js/ajax.js"></script>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "e60866365699a74bcf4b0e5e6839a2aa",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=2.0&key=ec63629efb4cdb5b157b9f9b1ab79c07"
    ></script>
    <script src="./js/index.js"></script>
  </body>
</html>
